<template>
  <!-- 登录页 -->
  <div class="container">
    <div class="home">
      <img src="../assets/图标/登录页-2.jpg" alt="" />
      <div class="content">
      <div class="username">
        <input type="username" placeholder="账户" v-model="unameVal" />
      </div>
      <div class="pwd">
        <input type="password" placeholder="密码" v-model="pwdVal" />
      </div>
      <div class="button-f">
      <button @click="loginClick">立即登录</button>
      <button @click="loginClickTwo">注册</button>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

import { GetLoginData } from "../raxios/api";
export default {
  data() {
    return {
      unameVal: "",
      pwdVal: "",
    };
  },
  // created(){
  //   let token = localStorage.getItem("token");

  // },
  components: {},
  methods: {
    loginClick() {
      // console.log(this.unameVal,this.pwdVal);
      if(!(this.unameVal&&this.pwdVal)==''){
        GetLoginData({
          username: this.unameVal,
          password: this.pwdVal,
        }).then((res) => {
          console.log(res);
          if (res.errCode == 0) {
            let token = res.data;
            //setItem存储
            localStorage.setItem("token", token);
            this.$router.push("/home");
          } else {
            alert("网络不佳");
          }
        });
      }else{
        alert('请填写信息')
      }
        
     
    },
    loginClickTwo(){
      this.$router.push('/register')
    }
  },
};
</script>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}
.home{
  width: 100%;
  height: 100%;
  position: relative;
  img{
    width: 100%;
    height: 100%;
  }
  .content{
    position: absolute;
    top: 55%;
    left: 25%;
    background-color:#77c4e1;
    input{
      padding:0.07rem 0;
      margin-bottom: 0.1rem;
      border-radius: 0.2rem;
      text-indent: 0.2rem;
      background-color: #ffcd33;
    }
    .pwd{
      margin-bottom: 0.3rem;
    }
  
    }
     button{
       width: 1.6rem;
      margin-left: 0.2rem;
      background-color: #4267fe;
      color: white;
      border-radius: 0.2rem;
      margin-bottom: 0.5rem;
      padding: 0.08rem;
    
      
}
  button:nth-child(2){
        background-color: pink;
      }
  }

</style>
